<template>
  <h1 style="text-align: center">账号随意，默认密码为:Qwer1234</h1>
  <div class="login-container">
    <div class="login" v-if="!isAuthenticated" >
      <label for="account" class="input-label">
        账号：<input type="text" id="account" placeholder="请输入账号" v-model="account" class="input-field">
      </label>
      <label for="password" class="input-label">
        密码：<input type="password" id="password" placeholder="请输入密码" v-model="password" class="input-field">
      </label>
      <button @click="login" class="login-button">Login</button>
    </div>
    <div class="logout-btn">
      <button v-if="isAuthenticated" @click="logout" class="logout-button">Logout</button>
    </div>
  </div>
</template>

<script>
import { useAuthStore } from '../store/auth';

export default {
  data() {
    return {
      account: '',
      password: ''
    };
  },
  computed: {
    isAuthenticated() {
      return useAuthStore().isAuthenticated;
    }
  },
  methods: {
    login() {
      const account = this.account;
      const password = this.password;
      if (useAuthStore().login(account, password) === true) {
        // 登录成功后获取redirect参数并进行跳转
        const redirect = this.$route.query.redirect || '/'; // 默认跳转到根路径
        this.$router.push(redirect);
      }
      else
      {
        alert("账号密码错误");
      }
    },
    logout() {
      useAuthStore().logout();
      this.$router.go(-1);
    },
  },
}
</script>


<style>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.login {
  background-color: #F5F5F5;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.input-label {
  display: block;
  margin-bottom: 20px;
  font-weight: bold;
}

.input-field {
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  width: 300px;
}

.login-button, .logout-button {
  padding: 14px 28px;
  background-color: #FFC107;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.login-button:hover, .logout-button:hover {
  background-color: #FFD54F;
}

.logout-btn {
  margin-top: 20px;
}

</style>